import React, { Component } from 'react';
import { Modal, Form, Input ,InputNumber} from 'antd';
const FormItem = Form.Item;

class UserEditModal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = (e) => {
     this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
        this.hideModelHandler();
      }
    });
  };

  render() {

  	const {form,record,title} =this.props;
  	const {name,age,address}=record;
    const { children } = this.props;
    const { getFieldDecorator } = this.props.form;

  	return (
      <span>
        <span onClick={this.showModelHandler}>
        { children }
        </span>
    <Modal
      title={title}
      visible={this.state.visible}
      onOk={this.okHandler}
      onCancel={this.hideModelHandler}
    >
      <Form  onSubmit={this.okHandler}>
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="用户名"
      >
        {form.getFieldDecorator('name', {
          initialValue: record!=undefined ?record.name:'',
          rules: [{ required: true, message: 'Please input your name' }],
        })(
          <Input placeholder="请输入" />
        )}
      </FormItem>
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="年龄"
      >
        {form.getFieldDecorator('age', {
          initialValue: record!=undefined ?record.age:'',
          rules: [{ required: true, message: 'Please input your age' }],
        })(
          <InputNumber placeholder="请输入" min={1} max={100}  />
        )}
      </FormItem>
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="地址"
      >
        {form.getFieldDecorator('address', {
          initialValue: record!=undefined ?record.address:'',
          rules: [{ required: true, message: 'Please input your address' }],
        })(
          <Input placeholder="请输入" />
        )}
      </FormItem>
      </Form>
    </Modal>
    </span>
  );
  }
  
}  

export default Form.create()(UserEditModal);


